<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Dom扩展</title>
	</head>
	<body>
		<span>1：呈现模式</span>
		<p>从ie6开始，开始区分标准模式和混杂模式（怪异模式），主要是看文档的声明。
		IE为document对象添加了一个名为compatMode属性，这个属性可以识别为IE浏览器的文档处于什么模式，
		如果是标准模式，则返回css1Compat。如果是混杂模式则返回BackCompat。其他浏览器都支持标准模式。
		ie8之后又引入documentMode新属性，因为ie8有三种呈现模式分别为标准模式8，仿真模式7，混杂模式5。
		所以如果想测试ie8的标准模式就判断document.documetMode>7即可</p>
		<span>2:滚动</span>
		<p>DOM提供了一些滚动页面的方法：document.getElementById('xxx').scrollIntoView();</p>
		<span>3：children属性</span>
		<p>由于子节点空白问题，IE和其他浏览器解释不一致，虽然可以过滤掉，但是如果只是想得到有效节点，可以使用children属性，
		支持的浏览器为：ie5+,firefox3.5+safari2+,opera3+和chrom，这个属性是非标准的。</p>
		<span>4:contains()方法</span>
		<p>判断一个节点是不是另一个节点的后代，我们可以使用contains()方法。这个方法时IE率先使用的，开发人员无需遍历便可获得此信息
		ps:早期的firefox不支持这个方法，现在支持，safari浏览器支持的有问题无法使用，所以必须做兼容。
		在firefox的DOM3级实现中提供了一个替代的方法 comparDocumentPosition()方法。这个方法确定两个节点之间的关系。
		</p>
		
		
	<div  style="width: 100%;height: 1000px;background: pink;">
	
		遮挡
	</div>
	<div id="box" style="width: 100px;height: 50px;background: yellow;">
		<p></p>
		测试div看不见
		<p></p>
	</div>
	
	</body>
	
	<script>
		window.onload =function(){
			//1呈现模式，比如浏览器宽度显示不同
		/*	alert(document.compatMode);//CSS1Compat
			if(document.compatMode=="CSS1Compat"){  
				alert(document.documentElement.clientWidth);
			}else{
				alert(document.body.clientWidth);
			}*/
		/*	//将指定的节点滚动到可见的范围内
			document.getElementById('box').scrollIntoView();
			
			alert(box.childNodes.length);//5  包含空白节点
			alert(box.children.length);//2 忽略空白节点
			
			alert(box.children[0].nodeName);*/
			
			var p = box.firstChild;
			alert(box.contains(p));//true  判断box是不是p的父节点
			alert(box.compareDocumentPosition(box.firstChild));//20：因为同时满足了4 和16两项 最后相加来了
			//ps：  1 表示无关节点不存在。2表示居前，节点在参考节点之前。4 居后。8包含（节点是参考节点的祖先） 16：被包含（节点是参考节点的后代）
		
		    //兼容不同浏览器
		function contains(refNode,otherNode){
			if(typeof refNode.contains !='undefined'){//此处不兼容苹果3.0以下
				return refNode.contains(otherNode);//递归
			}else if(typeof refNode.compareDocumentPosition=='function'){
				return refNode.compareDocumentPosition(otherNode)>16;
			}else{ //最低版本
				var node = otherNode.parentNode;
				do{
					if (node===refNode) {
						return true;
					} else{
						node = otherNode.parentNode;
					}
				}while(node!=null){
					return false;
				}
				
			}
		}
		
		}
		
		
	</script>
</html>
